Amazon Amplify Gen 2 の React + Vite テンプレートで Amazon QuickSight Embedding SDK を使ったダッシュボード埋め込みを実装する

いわさ

2024.09.29

いわさです。

Amazon QuickSight は外部 Web アプリケーションにダッシュボードやコンソールを埋め込むことが出来るのですが、パブリックな 1-Click 埋め込み機能以外は API を使って一時的なセッションを張って URL を生成したりとフロントエンドとバックエンドどちらも実装が必要でまぁまぁ面倒です。

そこで、最近 Amplify Gen 2 を使った検証を行うことが多く、フロント＋バックエンドAmplify のクイックスタート＋αで組み込みダッシュボードを実装出来ると便利かもしれないなと思ったので実装してみることにしました。

やることとしては最終的には React + Vite の QuickStart テンプレートのページへ、QuickSight Embedding SDK を使ってダッシュボードを埋め込みます。
そのために前段として QuickSight の API を実行して埋め込み用 URL を生成する必要があります。
また、そのリクエストとレスポンスをフロントエンドで送受信する必要があるのですが、今回は Lambda を簡単に組み込める Amplify Data に Amplify Function を関連付けします。要は AppSync + Lambda です。

Amplify Gen2 でクライアントから Lambda からレスポンス取得する

まずはフロントエンドからサーバーサイドの処理を実行したいと思います。
API Gateway + Lambda で実行する感じなのかなと思ったら、本日時点ではまだその機能は提供されていないようで CDK で API Gateway の構成を書いてやる必要があります。

Amplify を使っているので出来れば Amplify Gen2 の標準提供モジュールで済ませたいところです。
今回は以下の Amplify Funtion の初期設定ページに記載されている方法で Amplify Data に組み込みます。サンプルと同様に Query でで関数から値を受け取る形です。

関数を用意してスキーマに紐づけるだけです。

amplify/functions/quicksight-embed/resource.ts

import { defineFunction } from '@aws-amplify/backend';

export const quicksightEmbed = defineFunction({
  name: 'quicksight-embed',
  entry: './handler.ts',
});

amplify/functions/quicksight-embed/handler.ts

import type { Schema } from '../../data/resource';

export const handler: Schema["quicksightEmbed"]["functionHandler"] = async (event) => {
  return "hoge dummy";
};

amplify/data/resource.ts

import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
import { quicksightEmbed } from "../functions/quicksight-embed/resource";

const schema = a.schema({
  Hoge: a
    .model({
      HogeContent: a.string(),
      HogeNum: a.integer()
    })
    .authorization((allow) => [allow.owner().identityClaim('custom:tenant_id')]),
  quicksightEmbed: a
    .query()
    .returns(a.string())
    .authorization((allow) => [allow.authenticated()])
    .handler(a.handler.function(quicksightEmbed)),
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "userPool",
    apiKeyAuthorizationMode: {
      expiresInDays: 30,
    },
  },
});

これで、フロントエンドから Query してやることで Lambda 関数から値を受け取れるようになりました。

Lambda で QuickSight API の GenerateEmbedUrlForRegisteredUser を実行する

続いて、その Lambda 関数で返却する値を動的なものにします。
前提として QuickSight 側で適当なダッシュボードを作成済みです。そのため次の記事のように QuickSight の API を実行して埋め込み用の URL を取得します。

今回は匿名ユーザーでのセッション作成ではなく、ユーザーベースでの埋込取得です。
Lambda から QuickSight SDK を使ってGenerateEmbedUrlForRegisteredUserを実行します。

npm install @aws-sdk/client-quicksight

amplify/functions/quicksight-embed/handler.ts

import type { Schema } from '../../data/resource';
import { GenerateEmbedUrlForRegisteredUserCommand, QuickSightClient } from "@aws-sdk/client-quicksight";

export const handler: Schema["quicksightEmbed"]["functionHandler"] = async (event) => {

    const client = new QuickSightClient({ region: "ap-northeast-1" });
    const response = await client.send(new GenerateEmbedUrlForRegisteredUserCommand({
        AwsAccountId: "123456789012",
        SessionLifetimeInMinutes: 600,
        UserArn: "arn:aws:quicksight:ap-northeast-1:123456789012:user/default/hoge.fuga/hoge.piyo",
        ExperienceConfiguration: {
            Dashboard: {
                InitialDashboardId: "3e6e631b-7f3f-4eaf-8d6d-8f02888ca1c6"
            }
        },
        AllowedDomains: [
            "http://localhost:5173"
        ]
    }))
  return response.EmbedUrl ? response.EmbedUrl : "hoge dummy";
};

なお、今回はローカル実行を行うために AllowedDomains パラメータも指定しています。

そして、このままだと API 実行には実は失敗します。
Lambda 関数から QuickSight API を実行するための権限が必要です。
本日時点で Amplify 標準のリソース以外に対する権限を設定するにはバックエンド構成の Lambda に対し直接ポリシーを追加してやる必要があります。

amplify/backend.ts

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { data } from './data/resource';
import { quicksightEmbed } from './functions/quicksight-embed/resource';

import * as iam from "aws-cdk-lib/aws-iam"

const backend = defineBackend({
  auth,
  data,
  quicksightEmbed,
});

const statement = new iam.PolicyStatement({
  sid: "AllowHogeQuickSight",
  actions: ["quicksight:GenerateEmbedUrlForRegisteredUser"],
  resources: ["arn:aws:quicksight:ap-northeast-1:123456789012:user/default/hoge.fuga/hoge.piyo"],
})
const quicksightEmbedLambda = backend.quicksightEmbed.resources.lambda;
quicksightEmbedLambda.addToRolePolicy(statement)

React + Vite で QuickSight Embedding SDK を使う

これでフロントエンドがサーバーサイドから URL を取得出来るようになりました。
最後に、QuickSight Embedding SDK を使ってその URL を設定します。

QuickSIght Embedding SDK はこちらです。
公式ドキュメントなどを見ると生の JavaScirpt で実装するサンプルが多いのですが、以下の README.MD の Option 2 を今回は使います。

npm install amazon-quicksight-embedding-sdk

src/App.tsx

import { Authenticator } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'
import { useEffect } from "react";
import type { Schema } from "../amplify/data/resource";
import { generateClient } from "aws-amplify/data";

import { createEmbeddingContext, FrameOptions } from 'amazon-quicksight-embedding-sdk';

const client = generateClient<Schema>();

function App() {
  useEffect(() => {
    embedDashboard();
  }, []);

  const embedDashboard = async () => {
    const embeddingContext = await createEmbeddingContext();

    const embedUrl = await client.queries.quicksightEmbed();
    const frameOptions: FrameOptions = {
      url: embedUrl.data ? embedUrl.data : "hoge",
      container: '#hoge-quicksight-container',
    };

    const contentOptions = {
      locale: "js-JP"
    };
    await embeddingContext.embedDashboard(frameOptions, contentOptions);
  }

  return (
    <Authenticator>
      {({ signOut }) => (
        <main>
          <h1>My Hoges</h1>
          <div id="hoge-quicksight-container"></div>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

export default App;